<template>
  <div
    class="dashboard-page present-layout relative flex flex-col h-full overflow-hidden"
    id="present-layout"
  >
    <div class="present-layout__header flex justify-between items-center">
      <div class="present-layout__header-left" v-if="!queryPageId">
        <el-dropdown @command="changeOptions">
          <span
            class="cursor-pointer present-layout__header-right--icon"
            v-if="!queryPageId"
            >{{ selectOptionsLable ? selectOptionsLable : ''
            }}<i class="el-icon-arrow-down el-icon--right"></i
          ></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in resourceList"
              :command="item"
              :key="item.resourceId"
              >{{ item.resourceName }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div
        class="present-layout__header-right"
        style="display: flex; align-items: center"
        v-if="!queryPageId"
      >
        <el-dropdown @command="selectRefreshItem">
          <span
            class="cursor-pointer present-layout__header-right--icon"
            style="font-size: 14px"
            >{{ selectRefresh }}</span
          >
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in refreshList"
              :command="item"
              :key="item.value"
              >{{ item.label }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>

        <i
          @click="switchAutoTab"
          :class="[
            'cursor-pointer',
            'present-layout__header-right--icon',
            autoTabSwtich
              ? 'cuifont icon_stop_circle'
              : 'cuifont icon_play_circle'
          ]"
        ></i>

        <span
          style="color: white; font-size: 18px"
          class="cursor-pointer present-layout__header-right--icon"
          @click="fullscreenHandle"
          id="rotate-dashboard"
        >
          <svg class="icon-svg" aria-hidden="true">
            <use xlink:href="#icon-fullscreen"></use>
          </svg>
        </span>
      </div>
      <div class="present-layout__header-left" v-if="queryPageId"></div>
      <div class="present-layout__header-right" v-if="queryPageId">
        <span
          style="color: white; font-size: 18px"
          class="cursor-pointer present-layout__header-right--icon"
          @click="fullscreenHandle"
          id="single-dashboard"
        >
          <svg class="icon-svg" aria-hidden="true">
            <use xlink:href="#icon-fullscreen"></use>
          </svg>
        </span>
      </div>
    </div>

    <div
      class="present-layout__content flex-1 overflow-auto"
      v-loading="loading"
    >
      <grid-layout
        :layout.sync="gadgets"
        v-if="!isShow"
        :col-num="12"
        :row-height="10"
        :is-draggable="dashbordDefaultSetting.allowDragging"
        :is-resizable="dashbordDefaultSetting.allowResizing"
        :responsive="dashbordDefaultSetting.responsive"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="[12,12]"
        :use-css-transforms="true"
      >
        <grid-item
          v-for="(item, index) in gadgets"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :key="item.i"
          :name="item.name"
          :static="item.static"
          @container-resized="containerResizedEvent"
          @resized="resizedEvent"
          @mouseenter.native="mouseEnterModule(index)"
          @mouseleave.native="mouseLeaveModule(index)"
        >
          <div
            v-if="
              editMode &&
              item &&
              item.showSetting &&
              item.showSetting === 'show'
            "
            style="
              height: 20px;
              lineheight: 20px;
              position: absolute;
              top: 2px;
              right: 2px;
              z-index: 2020;
              background: #ffffff;
            "
          >
            &nbsp;
            <i
              @mouseenter="moveComponent(true)"
              @mouseleave="moveComponent(false)"
              :title="$t('custom.move')"
              class="el-icon-rank"
              v-if="!(item.com === 'pageheadergadget')"
              style="cursor: pointer"
            ></i
            >&nbsp;
            <!-- v-if="$hasPermission('sys:tenant:model:allowtomanage:report:temmodel')" -->
            <i
              v-if="hasPageHeaderPer(item.com)"
              @click="editComponent(item.i, item)"
              :title="$t('custom.edit')"
              class="el-icon-s-operation"
              style="cursor: pointer"
            ></i
            >&nbsp;
            <i
              @click="closeComponent(item.i)"
              :title="$t('custom.remove')"
              v-if="!(item.com === 'pageheadergadget')"
              class="el-icon-close"
              style="cursor: pointer"
            ></i
            >&nbsp;
          </div>
          <component
            :editMode="editMode"
            style="width: 100; height: calc(100% - 34px)"
            :gadgetInfo="item"
            @dragChanged="gadgetDragChanged"
            ref="gadgets"
            :autotask="autotask"
            @removed="gadgetRemoved"
            :id="item.i"
            :pageId="pageId"
            :presentMode="true"
            :presentModeItem="true"
            :businessType="businessTypeForWidget"
            :reportNameForPage="reportNameForPage"
            :dimensionKey.sync="dimensionKey"
            :timeFrameKey.sync="timeFrameKey"
            :is="item.com"
          ></component>
        </grid-item>
        <div
          v-if="gadgets.length === 1"
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80vh;
            background: #fff;
            margin-top: 10px;
          "
        >
          <img
            :src="$ossLink + '/app/dashboard/dashboard-left.png'"
            style="height: 500px"
          />
          <div style="margin-left: 120px">
            <div style="font-size: 34px; margin-bottom: 10px">
              {{ $t('custom.dashboard.nulldatafirst') }}
            </div>
            <div style="font-size: 34px; margin-bottom: 15px">
              {{ $t('custom.dashboard.nulldatasecond') }}
            </div>
            <div style="font-size: 20px; margin-bottom: 20px; color: #c8c8c8">
              {{ $t('custom.dashboard.nulldatathree') }}
            </div>
            <div>
              <el-button
                type="success"
                v-if="hasEditPermission"
                @click="addgauge"
                >{{ $t('custom.reports.nullwidget') }}
              </el-button>
            </div>
          </div>
        </div>
      </grid-layout>
      <div v-else>
        <grid-layout
          :layout.sync="gadgets1"
          :col-num="12"
          :row-height="10"
          :is-draggable="dashbordDefaultSetting.allowDragging"
          :is-resizable="dashbordDefaultSetting.allowResizing"
          :responsive="dashbordDefaultSetting.responsive"
          :is-mirrored="false"
          :vertical-compact="true"
          :margin="[12,12]"
          :use-css-transforms="true"
           class="widget-page-header"
        >
          <grid-item
            v-for="(item, index) in gadgets1"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :key="item.i"
            :name="item.name"
            :static="item.static"
            @container-resized="containerResizedEvent"
            @resized="resizedEvent"
            @mouseenter.native="mouseEnterModule(index)"
            @mouseleave.native="mouseLeaveModule(index)"
          >
            <div
              v-if="
                editMode &&
                item &&
                item.showSetting &&
                item.showSetting === 'show'
              "
              style="
                height: 20px;
                lineheight: 20px;
                position: absolute;
                top: 2px;
                right: 2px;
                z-index: 2020;
                background: #ffffff;
              "
            >
              &nbsp;
              <i
                @mouseenter="moveComponent(true)"
                @mouseleave="moveComponent(false)"
                :title="$t('custom.move')"
                class="el-icon-rank"
                v-if="!(item.com === 'pageheadergadget')"
                style="cursor: pointer"
              ></i
              >&nbsp;
              <!-- v-if="$hasPermission('sys:tenant:model:allowtomanage:report:temmodel')" -->
              <i
                v-if="hasPageHeaderPer(item.com)"
                @click="editComponent(item.i, item)"
                :title="$t('custom.edit')"
                class="el-icon-s-operation"
                style="cursor: pointer"
              ></i
              >&nbsp;
              <i
                @click="closeComponent(item.i)"
                :title="$t('custom.remove')"
                v-if="!(item.com === 'pageheadergadget')"
                class="el-icon-close"
                style="cursor: pointer"
              ></i
              >&nbsp;
            </div>
            <component
              :editMode="editMode"
              style="width: 100; height: calc(100% - 34px)"
              :gadgetInfo="item"
              @dragChanged="gadgetDragChanged"
              ref="gadgets"
              :autoTask="autoTask"
              @removed="gadgetRemoved"
              :id="item.i"
              :pageId="pageId"
              :presentMode="true"
              :presentModeItem="true"
              :businessType="businessTypeForWidget"
              :reportNameForPage="reportNameForPage"
              :is="item.com"
            ></component>
          </grid-item>
          <div
            v-if="gadgets.length === 1"
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              height: 80vh;
              background: #fff;
              margin-top: 10px;
            "
          >
            <img
              :src="$ossLink + '/app/dashboard/dashboard-left.png'"
              style="height: 500px"
            />
            <div style="margin-left: 120px">
              <div style="font-size: 34px; margin-bottom: 10px">
                {{ $t('custom.dashboard.nulldatafirst') }}
              </div>
              <div style="font-size: 34px; margin-bottom: 15px">
                {{ $t('custom.dashboard.nulldatasecond') }}
              </div>
              <div style="font-size: 20px; margin-bottom: 20px; color: #c8c8c8">
                {{ $t('custom.dashboard.nulldatathree') }}
              </div>
              <div>
                <el-button
                  type="success"
                  v-if="hasEditPermission"
                  @click="addgauge"
                  >{{ $t('custom.reports.nullwidget') }}
                </el-button>
              </div>
            </div>
          </div>
        </grid-layout>
        <grid-layout
          :layout.sync="gadgets2"
          :class="`vue_grid_layout_${this.pageId}`"
          :style="{ zoom: zoomNumber }"
          :col-num="12"
          :row-height="10"
          :is-draggable="dashbordDefaultSetting.allowDragging"
          :is-resizable="dashbordDefaultSetting.allowResizing"
          :responsive="dashbordDefaultSetting.responsive"
          :is-mirrored="false"
          :vertical-compact="true"
          :margin="[12,12]"
          :use-css-transforms="true"
        >
          <grid-item
            v-for="(item, index) in gadgets2"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :key="item.i"
            :name="item.name"
            :static="item.static"
            @container-resized="containerResizedEvent"
            @resized="resizedEvent"
            @mouseenter.native="mouseEnterModule(index)"
            @mouseleave.native="mouseLeaveModule(index)"
            class="widget-card-border"
          >
            <div
              v-if="
                editMode &&
                item &&
                item.showSetting &&
                item.showSetting === 'show'
              "
              style="
                height: 20px;
                lineheight: 20px;
                position: absolute;
                top: 2px;
                right: 2px;
                z-index: 2020;
                background: #ffffff;
              "
            >
              &nbsp;
              <i
                @mouseenter="moveComponent(true)"
                @mouseleave="moveComponent(false)"
                :title="$t('custom.move')"
                class="el-icon-rank"
                v-if="!(item.com === 'pageheadergadget')"
                style="cursor: pointer"
              ></i
              >&nbsp;
              <!-- v-if="$hasPermission('sys:tenant:model:allowtomanage:report:temmodel')" -->
              <i
                v-if="hasPageHeaderPer(item.com)"
                @click="editComponent(item.i, item)"
                :title="$t('custom.edit')"
                class="el-icon-s-operation"
                style="cursor: pointer"
              ></i
              >&nbsp;
              <i
                @click="closeComponent(item.i)"
                :title="$t('custom.remove')"
                v-if="!(item.com === 'pageheadergadget')"
                class="el-icon-close"
                style="cursor: pointer"
              ></i
              >&nbsp;
            </div>
            <component
              :editMode="editMode"
              style="width: 100; height: calc(100% - 34px)"
              :gadgetInfo="item"
              @dragChanged="gadgetDragChanged"
              ref="gadgets"
              :autoTask="autoTask"
              @removed="gadgetRemoved"
              :id="item.i"
              :pageId="pageId"
              :presentMode="true"
              :presentModeItem="true"
              :businessType="businessTypeForWidget"
              :reportNameForPage="reportNameForPage"
              :is="item.com"
            ></component>
          </grid-item>
          <div
            v-if="gadgets.length === 1"
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              height: 80vh;
              background: #fff;
              margin-top: 10px;
            "
          >
            <img
              :src="$ossLink + '/app/dashboard/dashboard-left.png'"
              style="height: 500px"
            />
            <div style="margin-left: 120px">
              <div style="font-size: 34px; margin-bottom: 10px">
                {{ $t('custom.dashboard.nulldatafirst') }}
              </div>
              <div style="font-size: 34px; margin-bottom: 15px">
                {{ $t('custom.dashboard.nulldatasecond') }}
              </div>
              <div style="font-size: 20px; margin-bottom: 20px; color: #c8c8c8">
                {{ $t('custom.dashboard.nulldatathree') }}
              </div>
              <div>
                <el-button
                  type="success"
                  v-if="hasEditPermission"
                  @click="addgauge"
                  >{{ $t('custom.reports.nullwidget') }}
                </el-button>
              </div>
            </div>
          </div>
        </grid-layout>
      </div>
    </div>

    <BDashboardAddWidget
      v-model="gadgets"
      :internalWidget="businessTypeForWidget === 'MSPbots Internal'"
      :internalSlicer="businessTypeForWidget === 'MSPbots Internal'"
      :widget="businessTypeForWidget !== 'MSPbots Internal'"
      :slicer="businessTypeForWidget !== 'MSPbots Internal'"
      :rootBusinessType="businessTypeForWidget"
      @event:open-widget-modal="selectGadget"
      :visible.sync="gadgetChoiceModalVisible"
    />

    <model
      :showSetting="queryModelDefaultSetting.showSetting"
      @queryModelClosed="queryModelClosed"
      ref="model"
      @refreshDataList="refreshDataList"
      :dataInfo="queryModelDefaultSetting.dataInfo"
      :updateGadget="updateGadget"
      :mappingForm="mappingForm"
    />

      <ZScreenHu v-if="curTheme && curTheme !=='white'"/>
  </div>
</template>

<script>
import mixinDashboardViewModule from '@/mixins/dashboard-view-module'
import mixinViewModule from '@/mixins/crud-view-module'
import {
  dashboardGadgetList,
  defaultGadgetSettingList
} from '@/utils/data-json'
import model from '@/components/gadget/query-model/query-model.vue'
import ComplexWidgetForm from '@/views/modules/mspbots/reports/components/complex-widget-form'
import EmitterMixin from '@/mixins/emitter'
import { getUUID } from '@/utils'
import { getUrlQureyParams } from '@/utils/common'
import screenfull from 'screenfull'
import Cookies from 'js-cookie'
import { getDictInfoCommon, getUserInfoCommon } from '@/utils/common-request'
import { getGadget } from '@/components/storybook/hooks/useGadget'
import { sqlSet } from '@/components/storybook/utilties/throttleRequest'
import ZScreenHu from '@/components/storybook/z-screen-hu'

export default {
  name: 'ReportLayout',
  mixins: [mixinDashboardViewModule, mixinViewModule, EmitterMixin],
  provide() {
    return {
      getBusinessTypeForWidget: () => this.businessTypeForWidget,
      componentName: 'ReportLayout'
    }
  },
  props: {
    autotask: {
      type: Object,
      default: null
    }
  },
  components: {
    model,
    ComplexWidgetForm,
    ZScreenHu
  },
  data() {
    return {
      reportRelationIntrogrationList: [],
      mixinViewModuleOptions: {
        createdIsNeed: false
      },
      nextTicketFrom: 'emty',
      titleTabs: 'title',
      checkedGauge: [],
      dataForm: {
        dataset: ''
      },
      searchVal: '',
      checkedCities: [],
      businessTypeListrecord: [],
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: '',
          gadgetId: '',
          gadgetType: '',
          gadgetSetting: {},
          reuse: true
        }
      },
      widgets: [],
      presentId: getUrlQureyParams('presentId'),
      queryPageId: getUrlQureyParams('queryPresentId'),
      resourceList: [],
      selectOptions: '',
      selectOptionsLable: '',
      presentMode: false,
      selectMode: 'light',
      refreshList: [
        {
          label: '3m',
          value: '180'
        },
        {
          label: '5m',
          value: '300'
        },
        {
          label: '10m',
          value: '600'
        },
        {
          label: '15m',
          value: '900'
        }
      ],
      selectRefresh: '',
      selectRefreshVal: '',
      timers: null,
      autoTabSwtich: true,
      timeValue: null,
      dimensionKey:'',
      timeFrameKey:'',
      zoomNumber: 1,
      fitToHeight: false,

      locationTimer:null
    }
  },
  created() {
    // if (this.$route.query.status && this.$route.query.code) {
    //   Cookies.set('token', this.$route.query.status, { sameSite: 'None', secure: true })
    //   Cookies.set('tenant_code', this.$route.query.code, { sameSite: 'None', secure: true })
    //   getDictInfoCommon()
    //   getUserInfoCommon()
    // }
    window.addEventListener('message', event => {
      if (
        event.data.status &&
        event.data.code &&
        event.data.sendPage === 'present'
      ) {
        if (window.opener) {
          window.opener.postMessage(
            {
              message: true
            },
            '*'
          )
        } else {
        }
        window.location.protocol === 'https:'? Cookies.set('token', event.data.status, {
          sameSite: 'None',
          secure: true
        }) : Cookies.set('token', event.data.status)
        window.location.protocol === 'https:'? Cookies.set('tenant_code', event.data.code, {
          sameSite: 'None',
          secure: true
        }) : Cookies.set('tenant_code', event.data.code)
      }
    })
    getDictInfoCommon()
    getUserInfoCommon()
    this.$on('event:bind-widget', this.bindWidget)
    this.$on('event:open-gadget', this.selectGadget)
    this.$on('event:preview-widget', this.PreviewWidget)
    this.$root.eventBus.$on('updateTemplateId', (id, data) => {
      var res = this.gadgets.find(item => item.id === id)
      if (res) {
        res.id = data.id
        res.businessType = 'Custom'
        res.i = data.gadgetId
        this.toggleClick()
      }
    })
    this.selectRefresh = '3m'
    this.selectRefreshVal = '180'

    this.locationTimer = setInterval(() => window.location.reload() ,10800000)
  },
  destroyed(){
    this.locationTimer && clearInterval(this.locationTimer)
  },
  computed: {
    GadgetList: {
      get() {
        let tempList = []
        tempList = this.userGadgetList
        return tempList
      },
      set(newVal) {
        this.businessTypeListrecord = newVal
      }
    },
    businessTypeList() {
      return window.SITE_CONFIG['dictList'].find(
        e => e.dictType === 'datasets_type_list'
      ).dataList
    },
    hasEditPermission() {
      let reportadmin = this.$hasPermission('sys:report:reportadmin') ? 1 : 0
      let editAuth = this.$hasPermission('sys:report:edit') ? 1 : 0
      let isCustom = this.businessTypeForWidget === 'Custom' ? 1 : 0
      if (reportadmin + editAuth + isCustom >= 2) {
        return true
      } else {
        return false
      }
    },
    gadgets1() {
      return [this.gadgets[0]]
    },
    gadgets2() {
      return this.gadgets.slice(1)
    },
    isShow() {
      return this.gadgets.some(item => item.gadgetType === 'pageheadergadget')
    },
  },
  watch: {
    userGadgetList(val) {
      this.businessTypeListrecord = this.filterHasWidget(val)
    },
    businessTypeListrecord(val) {
      this.broadcast('PublishedWidget', 'event:get-published-widgets', {
        widgets: val
      })
    },
    selectRefreshVal(val) {
      if (val) {
        this.timeValue = val
        this.autoRefresh(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.presentId) {
        this.getGroupItemInfo(this.presentId)
      }
      if (this.queryPageId) {
        this.changeOptions({ resourceId: this.queryPageId })
      }
    })

    setTimeout(() => {
      // this.launchFullScreen(document.getElementById('present-layout'))
      if (document.getElementById('rotate-dashboard'))
        document.getElementById('rotate-dashboard').click()
      if (document.getElementById('single-dashboard'))
        document.getElementById('single-dashboard').click()
    })
  },
  methods: {
    gadgetTypeImgUrl(type) {
      let obj = this._.filter(dashboardGadgetList, { key: type })
      return obj[0].imageUrl || ''
    },
    hasPageHeaderPer(type) {
      let headeradmin = this.$hasPermission('sys:report:pageheaderadmin')
        ? 1
        : 0
      let editadmin = this.$hasPermission(
        'sys:tenant:model:allowtomanage:report:temmodel'
      )
        ? 1
        : 0
      let auth = false
      if (type === 'pageheadergadget') {
        if (headeradmin + editadmin > 1) {
          auth = true
        }
      } else {
        if (editadmin > 0) {
          auth = true
        }
      }
      return auth
    },
    clearFormData() {
      this.searchVal = ''
      this.dataForm.dataset = ''
      this.businessTypeListrecord = []
      this.checkedCities = []
    },

    PreviewWidget(item) {
      this.commandClick(item)
    },
    reportMoreEdit() {
      this.visible = false
      this.$emit('editMoreReportShow', true)
    },
    handleCheckedCitiesChange(value) {
      this.checkedGauge = value
    },
    filterHasWidget(value) {
      let tempList = value
      if (this.businessTypeForWidget !== 'MSPbots Internal') {
        if (this.businessTypeForWidget === 'Template') {
          tempList = this._.reject(tempList, { businessType: 'Custom' })
        }
        tempList = this._.reject(tempList, { businessType: 'MSPbots Internal' })
      }
      let arr = []
      let tempListArr = []
      this.gadgets.forEach(element => {
        arr.push(element.i)
      })
      tempList.forEach(element => {
        if (arr.indexOf(element.gadgetId) === -1) {
          tempListArr.push(element)
        }
      })
      return tempListArr
    },
    showDesign() {
      this.showMsg = !this.showMsg
    },
    closeDesign() {
      this.showMsg = false
      this.editMode = false
    },

    bindWidget({ widgets }) {
      this.checkedGauge = widgets.map(({ name }) => name)

      this.addGadgetToPageGroup()

      this.broadcast('PublishedWidget', 'event:clear-widgets')
    },

    addGadgetToPageGroup() {
      this.filterHasWidget(this.userGadgetList).forEach(ele => {
        if (this.checkedGauge.includes(ele.name)) {
          this.reportRelationIntrogrationList.concat(ele.integrationCode)
          this.addGadgetToPage(ele)
          this.dialog = false
        }
      })
      this.checkedGauge = []
    },
    commandClick(row) {
      this.queryModelDefaultSetting.dataInfo = {
        ...row
      }
      this.$nextTick(() => {
        this.$store.state.isWidget = true
        this.showQueryModel()
      })
    },
    getGadgetSetting(key) {
      return (
        defaultGadgetSettingList.find(e => e.gadgetType === key)
          .gadgetSetting || {}
      )
    },
    selectGadget(record) {
      const { key } = record
      const widget = {
        businessId: '',
        gadgetId: getUUID(),
        gadgetType: key,
        gadgetSetting: this.getGadgetSetting(key),
        reuse: true,
        datasetSetting: {}
      }

      this.showWidgetDesign(widget)
    },
    showWidgetDesign(row) {
      this.queryModelDefaultSetting.dataInfo.datasetSetting = {}
      this.queryModelDefaultSetting.dataInfo = Object.assign(
        this._.merge(this.queryModelDefaultSetting.dataInfo, row)
      )
      this.queryModelDefaultSetting.showMoreEditSetting = true
      this.$nextTick(() => {
        this.$store.state.isWidget = true
        this.showQueryModel()
      })
    },
    showQueryModel() {
      this.queryModelDefaultSetting.showSetting = true
    },
    async queryModelClosed() {
      this.$set(this.queryModelDefaultSetting, 'showSetting', false)
      const [item] = this.widgets
      const row = getGadget(item)
      const index = this.gadgets.findIndex(record => record.id === row.id)
      if (index !== -1) {
        this.gadgets.splice(index, 1, row)
      } else {
        this.gadgets = this.gadgets
          .slice(0, 1)
          .concat(row, this.gadgets.slice(1))
      }
      this.gadgetChoiceModalVisible = false

      this.query()
    },

    async refreshDataList(widget) {
      this.widgets = [widget]
    },

    updateGadget() {},
    mappingForm(to, from) {},
    fullscreenHandle() {
      if (!screenfull.enabled) {
        return this.$message({
          message: this.$t('fullscreen.prompt'),
          type: 'warning',
          duration: 500
        })
      }

      screenfull.toggle()
    },
    getGroupItemInfo(presentId) {
      const params = {
        id: presentId
      }
      this.$interface.reports
        .getGroupInfo(params)
        .then(({ data: res }) => {
          if (!res) {
            return this.$message.error(res.msg)
          }
          this.resourceList = res.data.resourceList

          this.changeOptions({
            resourceId: this.resourceList[0].resourceId,
            resourceName: this.resourceList[0].resourceName
          })
        })
        .catch(() => {})
    },
    changeOptions(item) {
      if (item && item.resourceName) {
        document.title = item.resourceName
      }

      sqlSet.clear()

      this.selectOptions = item.resourceId
      this.selectOptionsLable = item.resourceName ? item.resourceName : ''
      this.presentMode = true
      this.pageId = item.resourceId
      this.gadgets = []
      this.getDashboardLayout()
    },
    // switchVieMode (data) {
    //   if (data === 'dark') {
    //     // document.getElementById.style.backgroundColor = '#424b56'
    //   } else {
    //   //  document.getElementById.style.backgroundColor = '#f1f4f5'
    //   }
    // },
    autoTimingSwitchTab() {
      let currentIndex = this.resourceList.findIndex(
        e => e.resourceId === this.selectOptions
      )
      let item = this.resourceList[currentIndex + 1]
      if (currentIndex + 1 === this.resourceList.length) {
        item = this.resourceList[0]
      }
      this.selectOptions = item.resourceId
      this.selectOptionsLable = item.resourceName
      this.changeOptions({
        resourceId: item.resourceId,
        resourceName: item.resourceName
      })
    },
    selectRefreshItem(item) {
      this.selectRefresh = item.label
      this.selectRefreshVal = item.value
      if (this.timers) clearInterval(this.timers)
    },
    autoRefresh(timeVal) {
      sqlSet.clear()
      if (
        this.autoTabSwtich &&
        timeVal &&
        Number(timeVal) > 0 &&
        !this.queryPageId
      ) {
        this.timers = setInterval(() => {
          this.autoTimingSwitchTab()
        }, Number(timeVal) * 1000)
      } else {
        clearInterval(this.timers)
      }
    },
    switchAutoTab() {
      this.autoTabSwtich = !this.autoTabSwtich
      if (!this.autoTabSwtich) {
        clearInterval(this.timers)
      } else {
        this.autoRefresh(this.timeValue)
      }
    },
    updataLayout() {
      var _self = this
      var chartDom = document.querySelector(`.vue_grid_layout_${_self.pageId}`)
      if (!chartDom) {
        setTimeout(() => {
          _self.updataLayout()
        }, 1000)
      } else {
        let domHeight = chartDom.clientHeight
        let bodyHeight = document.body.clientHeight
        if (domHeight > bodyHeight - 110) {
          this.zoomNumber = (bodyHeight - 110) / domHeight
        }
      }
    }
  },
  beforeCreate() {},
  beforeDestroy() {
    clearInterval(this.timers)
  }
}
</script>
<style lang="scss" scoped>
.present-layout {
  height: 100vh;
  &__header {
    height: 40px;
    padding: 0 15px;
    background-color: #17114d;
    &-right {
      &--icon {
        font-size: 18px;
        color: white;
        margin-left: 16px;
      }
    }
  }
}
</style>
